import { createApp } from 'vue'
import axios from 'axios'
// import App from './App.vue'  // ref 方法
// import App from './components/Test/App.vue' // 动态组件
// import App from './components/Test1/App.vue' // slot 插槽的使用
// import App from './components/Test2/App.vue' // 作用域插槽
// import App from './components/Test3/App.vue'
// import App from './components/Test4/App.vue'  // 自定义指令
import App from './components/Test5/App.vue' // tableList 案例

import './index.css'

axios.defaults.baseURL = 'http://127.0.0.1/api/'

const app = createApp(App)

app.config.globalProperties.$http = axios
// 自定义全局组件 v-focus
// app.directive('focus', {
//   // 当被绑定的元素插入到 DOM 中时, 自动触发 mounted 函数
//   mounted(el) {
//     // focus the element
//     el.focus()
//   }
// })
// // v-click
// app.directive('click', {
//   mounted(el) {
//     el.click()
//   }
// })

// 自动获取焦点
app.directive('focus', (el) => {
  // 立即执行
  el.focus()
})

// 指令传递参数值 v-color
app.directive('color', (el, binding) => {
  console.log(binding)
  el.style.color = binding.value
})
app.mount('#app')
